<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#buttons{width: 1200px;margin: 10px auto;clear: both;}
			#buttons a{font-size: 18px;display: block;float: left;margin-right: 30px;}
		</style>
	</head>
	<!--
    	作者：zyl
    	时间：2017-05-27
    	描述：
   定义和用法
	clearRect() 方法清空给定矩形内的指定像素。 	
	JavaScript 语法：		context.clearRect(x,y,width,height);
参数值
	参数						描述
	x				要清除的矩形左上角的 x 坐标
	y				要清除的矩形左上角的 y 坐标
	width			要清除的矩形的宽度，以像素计
	height			要清除的矩形的高度，以像素计
    -->
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
		<div id="buttons">
			<a href="#">source-over</a>
			<a href="#">source-atop</a>
			<a href="#">source-in</a>
			<a href="#">source-out</a>
			<a href="#">destination-over</a>
			<a href="#">destination-atop</a>
			<a href="#">destination-in</a>
			<a href="#">destination-out</a>
			<a href="#">lighter</a>
			<a href="#">copy</a>
			<a href="#">xor</a>
		</div>
	</body>
	<script>
	function draw(compositeStyle){
		var canvas = document.getElementById("canvas");
		canvas.width=1200;
		canvas.height=800;
		var context = canvas.getContext("2d");
		context.clearRect(0,0,canvas.width,canvas.height);//清空
		
		//draw title
		context.font ="bold 40px Arial";
		context.textAlign="center";
		context.textBaseline="middle";
		context.fillStyle="blue";
		//alert(compositeStyle)
		context.fillText("当前globalCompositeOperation属性="+compositeStyle,canvas.width/2,60);
		
		//draw a rect矩形
		context.fillStyle="burlywood";
		context.fillRect(300,150,500,500);
		//draw a triangle三角形
		context.globalCompositeOperation=compositeStyle;
		context.fillStyle="crimson";
		context.beginPath();
		context.moveTo(700,250);
		context.lineTo(1000,750);
		context.lineTo(400,750);
		context.closePath();
		context.fill();
	
	}
		
	function alertTitles(){
		
	}
		
		//默认属性
		draw("source-over");
	
	//调用当前点击
			var buttons =document.getElementById("buttons").getElementsByTagName("a");
		for(var i=0;i<buttons.length;i++){
			buttons[i].onclick =function(){
				draw(this.text);//按钮的文本内容是compositeStyle的属性(注意文本不能有空格)
				return false;
			}
		}

		
		
	</script>
</html>
